<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>

		<swiper :current="tabCurrentIndex" class="swiper-box" style="padding-top: 10rpx;padding-left: 30rpx;padding-right: 30rpx;" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y>
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>

					<!-- 订单列表 -->
					<view v-for="(item, index) in tabItem.orderList" :key="index" class="order-item" >
						<view class="goods-box-single">
							<image class="goods-img" :src="item.device.imageUrl" mode="aspectFill"></image>
							<view class="right" @click="navToDetailPage(item)">
								<view style="display: flex;">
									<view style="flex: 2;"><text class="title clamp" style="color: #1296db;font-weight: 600;font-size: 30rpx;letter-spacing:5rpx">{{ item.device.machineName }}</text></view>
									<view style="flex: 1;"><text v-if="item.payType==0" class="title clamp"
									style="font-size: 30rpx;letter-spacing:5rpx;color: #1296db;float: right;">直接消费</text>
								<text v-if="item.payType==1" class="title clamp"
									style="font-size: 30rpx;letter-spacing:5rpx;color: #1296db;float: right;">续费</text></view>
								</view>
								<!-- <text class="price">{{ item.price }}</text> -->
								<text class="title clamp"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:5rpx">订单编号:{{ item.orderSn }}</text>
								<text class="title clamp"
										style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:5rpx">下单时间:{{ item.createDatetime }}</text>
								<text class="title clamp"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:5rpx">开始时间:{{ item.startTime }}</text>
								<text class="title clamp"
									style="margin-top: 15rpx;font-size: 25rpx;letter-spacing:5rpx">结束时间:{{ item.endTime }}</text>
							</view>
						</view>

						<view class="price-box">
							<button class="action-btn1" @click="shareToggle(index,item)" v-if="item.orderStatus==2&&item.showStatus!=1&&item.device.isDepositDevice == 1"><text style="letter-spacing:10rpx">操作</text></button>
							<button class="action-btn recom" open-type="share" :data-obj="item" v-if="item.orderStatus==2&&item.device.isDepositDevice == 1"><text style="letter-spacing:10rpx">分享</text></button>
							<button class="action-btn cannel" @click="endOrder(item)" v-if="item.orderStatus==2&&item.certId==0&&item.device.isDepositDevice == 0"><text style="">结束订单</text></button>
							<button class="action-btn status" v-if="item.orderStatus==2"><text style="letter-spacing:10rpx">已付款</text></button>
							<button class="action-btn status" v-if="item.orderStatus==7"><text style="letter-spacing:10rpx">已完成</text></button>
							<button class="action-btn status" v-if="item.orderStatus==14"><text style="letter-spacing:10rpx">已退款</text></button>
							<button class="action-btn status" v-if="item.orderStatus==12"><text style="letter-spacing:10rpx">未付款</text></button>
							<button class="action-btn status" v-if="item.orderStatus==20"><text style="letter-spacing:10rpx">待取消</text></button>
							<button class="action-btn cannel" @click="showCannelOrder(item)" v-if="item.orderStatus==2&&item.showStatus==1&&item.device.isDepositDevice == 1"><text style="">取消订单</text></button>
						    <button class="action-btn recom1" @click="tiqian(item.id)" style="" v-if="item.orderStatus==2&&item.device.isDepositDevice == 1&&new Date().getTime()<new Date(item.startTime).getTime()"><text style="">提前开始</text></button>
						</view>

					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<uni-popup ref="popup" type="bottom">
			<view class="uni-popup-share">
				<view class="uni-share-title"><text class="uni-share-title-text">选择你要进行的操作</text></view>
				<view class="uni-share-content">
					<view class="uni-share-content-box">
						<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
							<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
							<text class="uni-share-text">{{item.text}}</text>
						</view>
			
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import Api from '@/common/api';
	// import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniPopupShare from "@/components/uni-popup/uni-popup-share.vue";
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import empty from '@/components/empty';
	import {
		formatDate
	} from '@/common/date';
	export default {
		components: {
			// uniLoadMore,
			empty,
			uniPopupShare,
			uniPopup
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						status: '0',
						text: '全部',
						loadingType: 'more',
						orderList: []
					},
					{
						status: '12,1',
						text: '待付款',
						loadingType: 'more',
						orderList: []
					},
					{
						status: '2',
						text: '已付款',
						loadingType: 'more',
						orderList: []
					},
					{
						status: '7',
						text: '已完成',
						loadingType: 'more',
						orderList: []
					}
				],
				bottomData: [{
						text: '开大门',
						icon: '/static/door1.png',
						name: '5'
					},
					{
						text: '开包厢门',
						icon: '/static/door.png',
						name: '0'
					},
					{
						text: '续费1小时',
						icon: '/static/xufei.png',
						name: '1'
					},
					{
						text: '续费2小时',
						icon: '/static/xufei.png',
						name: '2'
					},
					{
						text: '续费3小时',
						icon: '/static/xufei.png',
						name: '3'
					},
					{
						text: '续费4小时',
						icon: '/static/xufei.png',
						name: '4'
					},
					{
						text: '续费6小时',
						icon: '/static/xufei.png',
						name: '6'
					},
					{
						text: '续费8小时',
						icon: '/static/xufei.png',
						name: '8'
					}
				],
				order:null
			};
		},
		onLoad(options) {
			this.loadData();
		},
		onShow() {
			// uni.showModal({
			// 	title: '提示',
			// 	content: '找到需要续费的订单,并点击操作即可进行续费',
			// 	showCancel: false,
			// 	success: function(res) {

			// 	}
			// });
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			async tiqian(id){
				let that = this;
				let data = await Api.apiCall('get', Api.order.tiqian, {orderId:id});
				if(data==0){
					uni.showModal({
						title: '提示',
						content: '已为您调整订单时间,可前往订单操作中开启包厢门.',
						success: function(res) {
							if (res.confirm) {
								that.loadData('refresh');
							} else if (res.cancel) {
					
							}
						}
					});
				}else{
					uni.showModal({
						title: '提示',
						content: '因为与其他订单时间冲突,该订单暂不能提前开始。',
						success: function(res) {
							if (res.confirm) {
							} else if (res.cancel) {
					
							}
						}
					});
				}
			},
			onShareAppMessage(e) {
				if (e.from === "button") {
					// button 按钮分享
					let obj = e.target.dataset.obj // 获取 button 组件 自定义的data-obj值
					console.log(e)
					return {
						title: '悠然体验馆', // 标题
						imageUrl: '', // 封面图
						path: `/pages/order/shareOrder?machineName=${obj.device.machineName}&payType=${obj.payType}&startTime=${obj.startTime}&endTime=${obj.endTime}&id=${obj.id}&imageUrl=${obj.device.imageUrl}&orderStatus=${obj.orderStatus}&showStatus=${obj.showStatus}`, // 地址以及参数 
						success: function(res) {
							// 转发成功之后的回调
							if (res.errMsg == 'shareAppMessage:ok') {
								that.$core.msg("分享成功.");
							}
						},
						fail: function() {
							// 转发失败之后的回调
							if (res.errMsg == 'shareAppMessage:fail cancel') {
								// 用户取消转发
								that.$core.msg("取消分享.");
							} else if (res.errMsg == 'shareAppMessage:fail') {
								// 转发失败，其中 detail message 为详细失败信息
								that.$core.msg("分享失败,请稍后再试.");
							}
						}
					};
				} else {
					// 右上角自带的菜单分享
					return {
						path: `/pages/index/index`
					};
				}
		},
		async cannelOrder(item){
			let data = await Api.apiCall('get', Api.order.cannelOrder, {orderId:item.id});
			if(data){
				this.loadData();
				uni.showToast({
					icon:'success',
					title:'操作成功'
				})
			}
		},
		longpress(item) {
			uni.showModal({
				title: '确定删除该订单吗',
				content: '',
				success: (e) => {
					if (e.confirm) {
						this.cancelOrder(item)
						this.loadData('refresh');
					}
				}
			})
		},
		shareToggle(index, order) {
			if (order.orderStatus != 2) {
				return false;
			}
			this.order = order;
			this.$refs.popup.open('bottom');
		},
		//获取订单列表
		async loadData() {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let status = navItem.status;

			if (!this.hasLogin) {
				let url = '/pages/public/login';
				uni.navigateTo({
					url
				});
			} else {
				let params = {
					status: status
				};
				let data = await Api.apiCall('get', Api.order.coachOrderList, params);
				// console.log("订单列表" + JSON.stringify(data));
				let orderList = data.records.filter(item => {
					//添加不同状态下订单的表现形式
					item = Object.assign(item, this.orderStateExp(item.orderStatus));
					item.createDatetime = this.dateFormat(item.createDatetime);
					return item;
				});
				navItem.orderList = [];
				orderList.forEach(item => {
					navItem.orderList.push(item);
				});
			}
		},

		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.loadData();
		},
		async payOrder(item) {
			uni.showLoading({
				title: '请稍后'
			});

			let params = {
				orderId: item.id
			};
			let res = await Api.apiCall('post', Api.order.weixinAppletPay, params);
			console.log(res);
			if (res) {
				uni.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success(datas) {
						console.log(datas);
						uni.redirectTo({
							url: '/pages/money/paySuccess'
						})
					},
					fail(err) {
						fail(JSON.stringify(err))
					}
				});
			}
			uni.hideLoading();
		},
		close() {
			this.popup.close()
		},
		//结束订单
		async endOrder(item){
			uni.showLoading({
				title: '请稍后'
			});
			let params = {
				orderId: item.id
			};
			let data = await Api.apiCall('post', Api.order.endOrder, params);
			console.log(data);
			if(item.device.isWeigh == 0){
				if(data == 0){
					this.$core.msg("球未全部归位.");
					return false;
				}else{
					this.$core.msg("订单结束成功.");
				}
			}else{
				if (data) {
					this.$core.msg("订单结束成功.");
				}
			}
			uni.hideLoading();
			this.loadData('refresh');
		},
		//取消订单
		async cancelOrder(item) {
			uni.showLoading({
				title: '请稍后'
			});
			let params = {
				orderId: item.id
			};
			let data = await Api.apiCall('post', Api.order.closeDriverOrder, params);
			console.log(data);
			if (data) {
				this.$core.msg("订单取消成功.");
			}
			uni.hideLoading();
			this.loadData('refresh');
		},
		showCannelOrder(item){
			let that = this;
			// if(item.payType==1){
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '已续费成功的订单不支持取消',
			// 		showCancel:false,
			// 		success: function(res) {
			// 		}
			// 	});
			// 	return false;
			// }
			uni.showModal({
				title: '提示',
				content: '请确认是否需要取消订单?',
				success: function(res) {
					if (res.confirm) {
						that.cannelOrder(item);
					} else if (res.cancel) {
			
					}
				}
			});
		},
		//订单状态文字和颜色
		orderStateExp(status) {
			let stateTip = '',
				stateTipColor = '#fa436a';
			switch (+status) {
				case 12:
					stateTip = '待付款';
					break;
				case 1:
					stateTip = '待付款';
					break;
				case 2:
					stateTip = '已付款';
					break;
				case 7:
					stateTip = '已完成';
					stateTipColor = '#909399';
					break;
				case 8:
					stateTip = '已评价';
					stateTipColor = '#909399';
					break;
				case 15:
					stateTip = '已关闭';
					stateTipColor = '#909399';
					break;
					//更多自定义
			}
			return {
				stateTip,
				stateTipColor
			};
		},
		dateFormat(time) {
			if (time == null || time === '') {
				return 'N/A';
			}
			let date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
		},
		/**
		 * 选择内容
		 */
		async select(item, index) {
			let orderId = this.order.id;
			let deviceId = this.order.deviceId;
			if(item.name=='5'||item.name=='0'){
				let params = {
					orderId:orderId,
					taskType:item.name
				}
				if(item.name=='5'){
					let data = await Api.apiCall('get', Api.qsg.openDamen, params);
					if(data){
						let that = this;
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '操作成功.',
							success: function (res) {
								if (res.confirm) {
									that.$refs.popup.close('bottom');
									that.loadData('refresh');
								}
							}
						});
					}
				}else{
					let data = await Api.apiCall('get', Api.qsg.openBaoxiang, params);
					if(data){
						let that = this;
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '操作成功.',
							success: function (res) {
								if (res.confirm) {
									that.$refs.popup.close('bottom');
									that.loadData('refresh');
								}
							}
						});
					}
				}
			}else{
				let order = this.order;
				console.log(order)
				if(order.openStatus==0){
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '请先开启当前订单',
						success: function (res) {
						}
					});
					return false;
				}
				if(order.source=='share'){
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '仅支持购买人续费',
						success: function (res) {
							if (res.confirm) {
							}
						}
					});
					return false;
				}
				let startTime = this.dateFormat(order.endTime);
				let duration = item.name;
				let endTime = this.addDays(startTime,duration);
				this.getMeal(order.id,duration,deviceId,startTime,endTime);
			}
		},
		async getMeal(orderId,duration,deviceId,startTime,endTime){
			let data = await Api.apiCall('get', Api.qsg.getMealByDuration, {orderId:orderId,duration:duration});
			if(data&&data!=0){
				this.checkIsIntersect(data,deviceId,startTime,endTime);
			}else{
				uni.showToast({
					icon:'error',
					title:'该时长暂不支持续费',
					duration:3000
				})
			}
		},
		async checkIsIntersect(meal,deviceId,startTime,endTime){
			let params = {
				startTime: startTime,
				endTime: endTime,
				price: meal.price,
				storeId: meal.storeId,
				deviceId: deviceId,
				mealId: meal.id,
				mealName: meal.mealName,
			};
				let data = await Api.apiCall('post', Api.order.checkIsIntersect, params);
				if (data && data == 1) {
					uni.showToast({
						icon: "error",
						title: "订单时间冲突"
					})
				} else {
					console.log('下一步')
					this.submit(params)
				}
		},
		async submit(params) {
			let data = await Api.apiCall('post', Api.order.createOrder, params);
			console.log(data);
			if (data) {
				let id = data.id;
				let lastId = this.order.id;
				let url = `/pages/money/pay?id=${id}&lastId=${lastId}`;
				uni.redirectTo({
					url: url
				});
			} else {
				that.$core.msg(data);
			}
		},
		dateFormat(dateStr) {
			let date = new Date(dateStr);
			let year = date.getFullYear();
			// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			// 拼接
			return year + "/" + month + "/" + day + " " + hours + ":" + minutes;
		},
		addDays(date, duration) {
			var nd = new Date(date);
			nd = nd.valueOf();
			nd = nd + duration * 60 * 60 * 1000;
			nd = new Date(nd);
			//alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日");
			var y = nd.getFullYear();
			var m = nd.getMonth() + 1;
			var d = nd.getDate();
			if (m <= 9) m = "0" + m;
			if (d <= 9) d = "0" + d;
			var hours = nd.getHours() < 10 ? "0" + nd.getHours() : nd.getHours();
			var minutes = nd.getMinutes() < 10 ? "0" + nd.getMinutes() : nd.getMinutes();
			var seconds = nd.getSeconds() < 10 ? "0" + nd.getSeconds() : nd.getSeconds();
			return y + "/" + m + "/" + d + " " + hours + ":" + minutes;;
		}
	}
	};
</script>

<style lang="scss">
	page,
	.content {
		background: #f7f7f7;
		height: 100%;
	}
	
	.tab-content{
		border-radius: 30rpx;
	}
	
	.bottom-content{
		height: 600rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.bottom-content-item{
		flex:1;		
	}
	
	.bottom-content-item-row{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.meal-item{
		flex: 1;
		width: 33%;
		height: 200rpx;
		margin-top: 60rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		text-align: center;
		border-radius:15rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.bottom-content-item-column{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.btn-primary{
		background-color: #ff9662;
		text-align: center;
		border-radius: 15rpx;
		color: #FFFFFF;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 30rpx;
	}
	
	.btn-default{
		/* background-color: #ff9662; */
		border: 1rpx solid #ff9662;
		text-align: center;
		border-radius: 15rpx;
		color: #ff9662;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		margin-bottom: 30rpx;
	}
	
	.item-no-select{
		background-color: #ff9662;
	}
	
	.uni-popup-share {
		background-color: #fff;
	}
	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}
	.uni-share-title-text {
		font-size: 14px;
		color: #666;
	}
	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 10px;
	}
	
	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 360px;
	}
	
	.uni-share-content-item {
		width: 90px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
	}
	
	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}
	
	.uni-share-image {
		width: 30px;
		height: 30px;
	}
	
	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}
	
	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
	}
	
	.uni-share-button {
		flex: 1;
		border-radius: 50px;
		color: #666;
		font-size: 16px;
	}
	
	.uni-share-button::after {
		border-radius: 50px;
	}

	.swiper-box {
		/*  #ifdef  MP-WEIXIN  */
		height: calc(100% - 40px);
		/* #endif */
		/*  #ifdef  MP-ALIPAY  */
		height: 1200rpx;
		/* #endif */
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: #1296db;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #1296db;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;


		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;

			.goods-img {
				display: block;
				width: 160upx;
				height: 160upx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}

			.price {
				font-size: $font-lg;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}
		
		.action-btn1 {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: #1296db;
			border-style: solid;
			border-width: 1rpx;
			border-color: #1296db;
			background: #fff;
			border-radius: 100px;
		
			&:after {
				border-radius: 100px;
			}
		
			&.recom {
				background: #fff9f9;
				color: $base-color;
		
				&:after {
					border-color: #f7bcc8;
				}
			}
		}

		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #1296db;
				color: #fff9f9;

				&:after {
					border-color: #f7bcc8;
				}
			}
			
			&.recom1 {
				background: #ca4300;
				color: #fff9f9;
			
				&:after {
					border-color: #f7bcc8;
				}
			}
			
			&.status {
				background: #5f5f5f;
				color: #fff9f9;
			
				&:after {
					border-color: #f7bcc8;
				}
			}
			
			&.cannel {
				background: #a73753;
				color: #fff9f9;
			
				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}

	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center;
	}

	.uni-load-more__text {
		font-size: 28upx;
		color: #999;
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px;
	}

	.uni-load-more__img>view {
		position: absolute;
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: 0.2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite;
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0;
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0;
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px;
	}

	.load2 {
		transform: rotate(30deg);
	}

	.load3 {
		transform: rotate(60deg);
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s;
	}

	.load2 view:nth-child(1) {
		animation-delay: 0.13s;
	}

	.load3 view:nth-child(1) {
		animation-delay: 0.26s;
	}

	.load1 view:nth-child(2) {
		animation-delay: 0.39s;
	}

	.load2 view:nth-child(2) {
		animation-delay: 0.52s;
	}

	.load3 view:nth-child(2) {
		animation-delay: 0.65s;
	}

	.load1 view:nth-child(3) {
		animation-delay: 0.78s;
	}

	.load2 view:nth-child(3) {
		animation-delay: 0.91s;
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s;
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s;
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s;
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0.2;
		}
	}
</style>
